<style>
    :root {
        --primary: #165DFF;
        --primary-light: #E8F3FF;
        --primary-dark: #0E42D2;
        --secondary: #36CFC9;
        --success: #52C41A;
        --warning: #FAAD14;
        --danger: #FF4D4F;
        --dark: #1D2129;
        --gray: #86909C;
        --light: #F2F3F5;
        --border: #E5E6EB;
        --shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        --shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.1);
    }

    body {
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
        background-color: #F7F8FA;
        color: var(--dark);
        line-height: 1.6;
    }

    .container {
        max-width: 1200px;
    }


    /* 主内容区 */
    .main-content {
        padding: 2rem 0;
    }

    /* 页面标题 */
    .page-header {
        margin-bottom: 2.5rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--border);
    }

    .page-header .page-title {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        color: var(--dark);
    }

    .page-header .page-desc {
        color: var(--gray);
        max-width: 800px;
    }

    /* 排行榜通用样式 */
    .ranking-section {
        margin-bottom: 3.5rem;
        background-color: white;
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: var(--shadow);
    }

    .ranking-section .ranking-header {
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .ranking-section .ranking-title {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 0;
        display: flex;
        align-items: center;
    }

    .ranking-section .ranking-title i {
        color: var(--primary);
        margin-right: 0.75rem;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--primary-light);
        border-radius: 6px;
    }

    .ranking-section .ranking-filters {
        display: flex;
        gap: 0.75rem;
        flex-wrap: wrap;
    }

    .ranking-section .ranking-filter {
        padding: 0.375rem 1rem;
        border-radius: 6px;
        font-size: 0.9rem;
        cursor: pointer;
        transition: all 0.2s;
        background-color: var(--light);
        border: none;
    }

    .ranking-section .ranking-filter.active {
        background-color: var(--primary);
        color: white;
    }

    .ranking-section .view-all {
        color: var(--primary);
        text-decoration: none;
        font-weight: 500;
        display: flex;
        align-items: center;
        padding: 0.375rem 0.75rem;
        border-radius: 6px;
        transition: background-color 0.2s;
    }

    .ranking-section .view-all:hover {
        color: var(--primary-dark);
        background-color: var(--primary-light);
    }

    .ranking-section .view-all i {
        margin-left: 0.25rem;
        font-size: 0.85rem;
    }

    /* 1. 热门内容排行榜 */
    .content-ranking {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .content-item {
        display: flex;
        align-items: center;
        padding: 1rem;
        border-radius: 8px;
        transition: background-color 0.2s;
    }

    .content-item:hover {
        background-color: var(--light);
    }

    .content-item .content-rank {
        width: 32px;
        height: 32px;
        border-radius: 6px;
        background-color: var(--primary-light);
        color: var(--primary);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        margin-right: 1rem;
        flex-shrink: 0;
    }

    .content-item .content-rank.top-1 {
        background-color: #FFF7E6;
        color: #FAAD14;
    }

    .content-item .content-rank.top-2 {
        background-color: #F0F2F5;
        color: #86909C;
    }

    .content-item .content-rank.top-3 {
        background-color: #FFF2F3;
        color: #FF7D00;
    }

    .content-item .content-image {
        width: 80px;
        height: 80px;
        border-radius: 8px;
        object-fit: cover;
        margin-right: 1rem;
        flex-shrink: 0;
    }

    .content-item .content-info {
        flex: 1;
        min-width: 0;
    }

    .content-item .content-title {
        font-weight: 600;
        margin-bottom: 0.25rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .content-item .content-meta {
        display: flex;
        align-items: center;
        font-size: 0.85rem;
        color: var(--gray);
    }

    .content-item .content-author {
        display: flex;
        align-items: center;
        margin-right: 1.5rem;
    }

    .content-item .content-author img {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        margin-right: 0.5rem;
    }

    .content-item .content-stats {
        display: flex;
        gap: 1rem;
    }

    .content-item .content-stat {
        display: flex;
        align-items: center;
    }

    .content-item .content-stat i {
        margin-right: 0.25rem;
        font-size: 0.85rem;
    }

    .content-item .content-trend {
        display: flex;
        align-items: center;
        font-size: 0.85rem;
        font-weight: 500;
        margin-left: 1rem;
        flex-shrink: 0;
    }

    .content-item .content-trend.up {
        color: var(--success);
    }

    .content-item .content-trend.down {
        color: var(--danger);
    }

    .content-item .content-trend i {
        margin-right: 0.25rem;
    }

    /* 2. 用户影响力排行榜 */
    .users-ranking {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1.5rem;
    }

    .user-card {
        display: flex;
        align-items: center;
        padding: 1rem;
        border-radius: 10px;
        transition: all 0.2s;
        background-color: white;
        border: 1px solid var(--border);
    }

    .user-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-hover);
        border-color: transparent;
    }

    .user-card .user-rank {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background-color: var(--primary-light);
        color: var(--primary);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        margin-right: 1rem;
        flex-shrink: 0;
    }

    .user-card .user-rank.top-1 {
        background-color: #FFF7E6;
        color: #FAAD14;
        border: 2px solid #FFD666;
    }

    .user-card .user-rank.top-2 {
        background-color: #F0F2F5;
        color: #86909C;
        border: 2px solid #C9CDD4;
    }

    .user-card .user-rank.top-3 {
        background-color: #FFF2F3;
        color: #FF7D00;
        border: 2px solid #FFB88C;
    }

    .user-card .user-avatar {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 1rem;
        border: 2px solid var(--light);
        flex-shrink: 0;
    }

    .user-card .user-info {
        flex: 1;
    }

    .user-card .user-name {
        font-weight: 600;
        margin-bottom: 0.15rem;
    }

    .user-card .user-category {
        font-size: 0.8rem;
        color: var(--gray);
        margin-bottom: 0.5rem;
    }

    .user-card .user-score {
        font-size: 0.85rem;
        color: var(--primary);
        font-weight: 500;
    }

    .user-card .user-follow {
        padding: 0.35rem 0.85rem;
        background-color: white;
        color: var(--primary);
        border: 1px solid var(--primary);
        border-radius: 6px;
        font-weight: 500;
        font-size: 0.85rem;
        transition: all 0.2s;
        white-space: nowrap;
    }

    .user-card .user-follow:hover {
        background-color: var(--primary);
        color: white;
    }

    .user-card .user-follow.following {
        background-color: var(--primary);
        color: white;
    }

    /* 3. 话题热度排行榜 */
    .topics-ranking {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 1rem;
    }

    .topic-card {
        padding: 1.25rem;
        border-radius: 10px;
        background-color: white;
        border: 1px solid var(--border);
        transition: all 0.2s;
        position: relative;
        overflow: hidden;
    }

    .topic-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-hover);
        border-color: transparent;
    }

    .topic-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background-color: var(--primary-light);
        transition: background-color 0.2s;
    }

    .topic-card:hover::before {
        background-color: var(--primary);
    }

    .topic-card .topic-rank {
        position: absolute;
        top: 1rem;
        right: 1rem;
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--light);
        transition: color 0.2s;
    }

    .topic-card:hover .topic-rank {
        color: var(--primary-light);
    }

    .topic-card.top-1::before {
        background-color: #FAAD14;
    }

    .topic-card.top-2::before {
        background-color: #86909C;
    }

    .topic-card.top-3::before {
        background-color: #FF7D00;
    }

    .topic-card .topic-name {
        font-weight: 600;
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        padding-right: 2rem;
    }

    .topic-card .topic-name i {
        color: var(--primary);
        margin-right: 0.5rem;
    }

    .topic-card .topic-desc {
        font-size: 0.85rem;
        color: var(--gray);
        margin-bottom: 1rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .topic-card .topic-stats {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.8rem;
    }

    .topic-card .topic-posts {
        color: var(--gray);
        display: flex;
        align-items: center;
    }

    .topic-card .topic-posts i {
        margin-right: 0.25rem;
        font-size: 0.75rem;
    }

    .topic-card .topic-trend {
        display: flex;
        align-items: center;
        font-weight: 500;
    }

    .topic-card .topic-trend.hot {
        color: var(--danger);
    }

    .topic-card .topic-trend.rising {
        color: var(--success);
    }

    /* 4. 小组活跃度排行榜 */
    .groups-ranking {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .group-item {
        display: flex;
        align-items: center;
        padding: 1rem;
        border-radius: 8px;
        transition: all 0.2s;
        border: 1px solid var(--border);
    }

    .group-item:hover {
        background-color: var(--light);
        border-color: var(--primary-light);
    }

    .group-item .group-rank {
        width: 32px;
        height: 32px;
        border-radius: 6px;
        background-color: var(--primary-light);
        color: var(--primary);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        margin-right: 1rem;
        flex-shrink: 0;
    }

    .group-item .group-rank.top-1 {
        background-color: #FFF7E6;
        color: #FAAD14;
    }

    .group-item .group-rank.top-2 {
        background-color: #F0F2F5;
        color: #86909C;
    }

    .group-item .group-rank.top-3 {
        background-color: #FFF2F3;
        color: #FF7D00;
    }

    .group-item .group-logo {
        width: 64px;
        height: 64px;
        border-radius: 8px;
        object-fit: cover;
        margin-right: 1rem;
        flex-shrink: 0;
    }

    .group-item .group-info {
        flex: 1;
        min-width: 0;
    }

    .group-item .group-name {
        font-weight: 600;
        margin-bottom: 0.25rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .group-item .group-members {
        font-size: 0.85rem;
        color: var(--gray);
        margin-bottom: 0.25rem;
        display: flex;
        align-items: center;
    }

    .group-item .group-members i {
        margin-right: 0.25rem;
        font-size: 0.85rem;
    }

    .group-item .group-activity {
        display: flex;
        align-items: center;
        font-size: 0.8rem;
        color: var(--primary);
        font-weight: 500;
    }

    .group-item .group-activity i {
        margin-right: 0.25rem;
        font-size: 0.75rem;
    }

    .group-item .group-progress {
        width: 120px;
        height: 8px;
        background-color: var(--light);
        border-radius: 4px;
        margin: 0 1rem;
        overflow: hidden;
    }

    .group-item .group-progress-bar {
        height: 100%;
        background-color: var(--primary);
        border-radius: 4px;
    }

    .group-item .group-join {
        padding: 0.35rem 0.85rem;
        background-color: white;
        color: var(--primary);
        border: 1px solid var(--primary);
        border-radius: 6px;
        font-weight: 500;
        font-size: 0.85rem;
        transition: all 0.2s;
        white-space: nowrap;
    }

    .group-item .group-join:hover {
        background-color: var(--primary);
        color: white;
    }

    .group-item .group-join.joined {
        background-color: var(--primary);
        color: white;
    }

    /* 5. 周榜月榜切换式排行榜 */
    .period-ranking {
        border: 1px solid var(--border);
        border-radius: 10px;
        overflow: hidden;
    }

    .period-tabs {
        display: flex;
        border-bottom: 1px solid var(--border);
    }

    .period-tabs .period-tab {
        flex: 1;
        text-align: center;
        padding: 1rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
    }

    .period-tabs .period-tab.active {
        color: var(--primary);
        border-bottom: 2px solid var(--primary);
        margin-bottom: -1px;
    }

    .period-content {
        padding: 1rem;
    }

    .period-content .weekly-ranking, .period-content .monthly-ranking {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .trending-item {
        display: flex;
        align-items: center;
        padding: 0.75rem;
        border-radius: 6px;
        transition: background-color 0.2s;
    }

    .trending-item:hover {
        background-color: var(--light);
    }

    .trending-item .trending-rank {
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        margin-right: 0.75rem;
        color: var(--gray);
    }

    .trending-item .trending-content {
        flex: 1;
        min-width: 0;
    }

    .trending-item .trending-title {
        font-weight: 500;
        margin-bottom: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .trending-item .trending-meta {
        font-size: 0.8rem;
        color: var(--gray);
    }

    .trending-item .trending-score {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--primary);
        margin-left: 1rem;
        white-space: nowrap;
    }

    /* 响应式设计 */
    @media (max-width: 992px) {
        .users-ranking {
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        }

        .topics-ranking {
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        }

        .content-item .content-trend {
            margin-left: 0.5rem;
        }

        .content-item .content-stats {
            gap: 0.75rem;
        }
    }

    @media (max-width: 768px) {
        .page-header .page-title {
            font-size: 1.75rem;
        }

        .ranking-section .ranking-title {
            font-size: 1.25rem;
        }

        .ranking-section .ranking-header {
            flex-direction: column;
            align-items: flex-start;
        }

        .content-item {
            flex-wrap: wrap;
        }

        .content-item .content-trend {
            margin-left: 0;
            margin-top: 0.5rem;
            order: 4;
        }

        .group-item {
            flex-wrap: wrap;
        }

        .group-item .group-progress {
            width: 100%;
            margin: 0.5rem 0;
            order: 4;
        }

        .group-item .group-join {
            margin-top: 0.5rem;
            width: 100%;
        }
    }

    @media (max-width: 576px) {
        .main-content {
            padding: 1.5rem 0;
        }

        .users-ranking,
        .topics-ranking {
            grid-template-columns: 1fr;
        }

        .content-item .content-image {
            width: 64px;
            height: 64px;
        }

        .content-item .content-author {
            margin-right: 0.75rem;
        }

        .content-item .content-stats {
            flex-wrap: wrap;
        }
    }
</style>


<div class="container main-content">
    <!-- 页面标题 -->
    <div class="page-header">
        <h1 class="page-title">平台排行榜</h1>
        <p class="page-desc">查看平台上最热门的内容、最具影响力的用户、最受欢迎的话题和最活跃的小组，发现社区中的精彩内容。</p>
    </div>

    <!-- 1. 热门内容排行榜 -->
    <div class="ranking-section">
        <div class="ranking-header">
            <h2 class="ranking-title"><i class="fas fa-fire-alt"></i> 热门内容排行</h2>
            <div class="ranking-filters">
                <button class="ranking-filter active">全部内容</button>
                <button class="ranking-filter">文章</button>
                <button class="ranking-filter">视频</button>
                <button class="ranking-filter">图片</button>
            </div>
        </div>

        <div class="content-ranking">
            <div class="content-item">
                <div class="content-rank top-1">1</div>
                <img src="https://picsum.photos/200/200?random=1" class="content-image" alt="热门内容图片">
                <div class="content-info">
                    <div class="content-title">2023年最值得一去的10个小众旅行地，避开人潮享受宁静</div>
                    <div class="content-meta">
                        <div class="content-author">
                            <img src="https://picsum.photos/50/50?random=101" alt="作者头像">
                            <span>旅行家小明</span>
                        </div>
                        <div class="content-stats">
                            <span class="content-stat"><i class="far fa-eye"></i> 24.5k</span>
                            <span class="content-stat"><i class="far fa-comment"></i> 328</span>
                            <span class="content-stat"><i class="fas fa-heart"></i> 1.2k</span>
                        </div>
                    </div>
                </div>
                <div class="content-trend up">
                    <i class="fas fa-arrow-up"></i> 32%
                </div>
            </div>

            <div class="content-item">
                <div class="content-rank top-2">2</div>
                <img src="https://picsum.photos/200/200?random=2" class="content-image" alt="热门内容图片">
                <div class="content-info">
                    <div class="content-title">从零开始学习摄影：掌握这5个技巧，拍出专业级照片</div>
                    <div class="content-meta">
                        <div class="content-author">
                            <img src="https://picsum.photos/50/50?random=102" alt="作者头像">
                            <span>光影记录者</span>
                        </div>
                        <div class="content-stats">
                            <span class="content-stat"><i class="far fa-eye"></i> 18.7k</span>
                            <span class="content-stat"><i class="far fa-comment"></i> 256</span>
                            <span class="content-stat"><i class="fas fa-heart"></i> 987</span>
                        </div>
                    </div>
                </div>
                <div class="content-trend up">
                    <i class="fas fa-arrow-up"></i> 18%
                </div>
            </div>

            <div class="content-item">
                <div class="content-rank top-3">3</div>
                <img src="https://picsum.photos/200/200?random=3" class="content-image" alt="热门内容图片">
                <div class="content-info">
                    <div class="content-title">一周减脂餐食谱：健康美味不挨饿，轻松瘦5斤</div>
                    <div class="content-meta">
                        <div class="content-author">
                            <img src="https://picsum.photos/50/50?random=103" alt="作者头像">
                            <span>健康营养师</span>
                        </div>
                        <div class="content-stats">
                            <span class="content-stat"><i class="far fa-eye"></i> 15.2k</span>
                            <span class="content-stat"><i class="far fa-comment"></i> 189</span>
                            <span class="content-stat"><i class="fas fa-heart"></i> 845</span>
                        </div>
                    </div>
                </div>
                <div class="content-trend up">
                    <i class="fas fa-arrow-up"></i> 12%
                </div>
            </div>

            <div class="content-item">
                <div class="content-rank">4</div>
                <img src="https://picsum.photos/200/200?random=4" class="content-image" alt="热门内容图片">
                <div class="content-info">
                    <div class="content-title">远程工作效率提升指南：在家办公也能高效产出</div>
                    <div class="content-meta">
                        <div class="content-author">
                            <img src="https://picsum.photos/50/50?random=104" alt="作者头像">
                            <span>职场效率达人</span>
                        </div>
                        <div class="content-stats">
                            <span class="content-stat"><i class="far fa-eye"></i> 12.8k</span>
                            <span class="content-stat"><i class="far fa-comment"></i> 156</span>
                            <span class="content-stat"><i class="fas fa-heart"></i> 732</span>
                        </div>
                    </div>
                </div>
                <div class="content-trend down">
                    <i class="fas fa-arrow-down"></i> 3%
                </div>
            </div>

            <div class="content-item">
                <div class="content-rank">5</div>
                <img src="https://picsum.photos/200/200?random=5" class="content-image" alt="热门内容图片">
                <div class="content-info">
                    <div class="content-title">极简主义生活：断舍离后，我的生活发生了这些变化</div>
                    <div class="content-meta">
                        <div class="content-author">
                            <img src="https://picsum.photos/50/50?random=105" alt="作者头像">
                            <span>简约生活家</span>
                        </div>
                        <div class="content-stats">
                            <span class="content-stat"><i class="far fa-eye"></i> 10.5k</span>
                            <span class="content-stat"><i class="far fa-comment"></i> 124</span>
                            <span class="content-stat"><i class="fas fa-heart"></i> 654</span>
                        </div>
                    </div>
                </div>
                <div class="content-trend up">
                    <i class="fas fa-arrow-up"></i> 8%
                </div>
            </div>
        </div>

        <div class="text-center mt-3">
            <a href="#" class="view-all">查看完整排行榜 <i class="fas fa-angle-right"></i></a>
        </div>
    </div>

    <!-- 2. 用户影响力排行榜 -->
    <div class="ranking-section">
        <div class="ranking-header">
            <h2 class="ranking-title"><i class="fas fa-crown"></i> 用户影响力排行</h2>
            <div class="ranking-filters">
                <button class="ranking-filter active">综合影响力</button>
                <button class="ranking-filter">创作力</button>
                <button class="ranking-filter">互动力</button>
                <button class="ranking-filter">新势力</button>
            </div>
        </div>

        <div class="users-ranking">
            <div class="user-card">
                <div class="user-rank top-1">1</div>
                <img src="https://picsum.photos/100/100?random=21" class="user-avatar" alt="用户头像">
                <div class="user-info">
                    <div class="user-name">旅行家陈默</div>
                    <div class="user-category">旅行 · 摄影</div>
                    <div class="user-score">影响力指数: 9876</div>
                </div>
                <button class="user-follow following">已关注</button>
            </div>

            <div class="user-card">
                <div class="user-rank top-2">2</div>
                <img src="https://picsum.photos/100/100?random=22" class="user-avatar" alt="用户头像">
                <div class="user-info">
                    <div class="user-name">美食家小雨</div>
                    <div class="user-category">美食 · 生活</div>
                    <div class="user-score">影响力指数: 9452</div>
                </div>
                <button class="user-follow">关注</button>
            </div>

            <div class="user-card">
                <div class="user-rank top-3">3</div>
                <img src="https://picsum.photos/100/100?random=23" class="user-avatar" alt="用户头像">
                <div class="user-info">
                    <div class="user-name">科技评论员老王</div>
                    <div class="user-category">科技 · 评论</div>
                    <div class="user-score">影响力指数: 8976</div>
                </div>
                <button class="user-follow">关注</button>
            </div>

            <div class="user-card">
                <div class="user-rank">4</div>
                <img src="https://picsum.photos/100/100?random=24" class="user-avatar" alt="用户头像">
                <div class="user-info">
                    <div class="user-name">健身教练张婷</div>
                    <div class="user-category">健身 · 健康</div>
                    <div class="user-score">影响力指数: 8542</div>
                </div>
                <button class="user-follow">关注</button>
            </div>

            <div class="user-card">
                <div class="user-rank">5</div>
                <img src="https://picsum.photos/100/100?random=25" class="user-avatar" alt="用户头像">
                <div class="user-info">
                    <div class="user-name">职场导师李明</div>
                    <div class="user-category">职场 · 成长</div>
                    <div class="user-score">影响力指数: 8215</div>
                </div>
                <button class="user-follow following">已关注</button>
            </div>

            <div class="user-card">
                <div class="user-rank">6</div>
                <img src="https://picsum.photos/100/100?random=26" class="user-avatar" alt="用户头像">
                <div class="user-info">
                    <div class="user-name">读书博主赵敏</div>
                    <div class="user-category">阅读 · 文化</div>
                    <div class="user-score">影响力指数: 7986</div>
                </div>
                <button class="user-follow">关注</button>
            </div>
        </div>

        <div class="text-center mt-3">
            <a href="#" class="view-all">查看完整排行榜 <i class="fas fa-angle-right"></i></a>
        </div>
    </div>

    <!-- 3. 话题热度排行榜 -->
    <div class="ranking-section">
        <div class="ranking-header">
            <h2 class="ranking-title"><i class="fas fa-tags"></i> 话题热度排行</h2>
            <div class="ranking-filters">
                <button class="ranking-filter active">全部话题</button>
                <button class="ranking-filter">今日热门</button>
                <button class="ranking-filter">本周上升</button>
            </div>
        </div>

        <div class="topics-ranking">
            <div class="topic-card top-1">
                <div class="topic-rank">1</div>
                <div class="topic-name"><i class="fas fa-hashtag"></i> 人工智能与未来生活</div>
                <div class="topic-desc">讨论AI技术如何改变我们的日常生活、工作方式和社会结构</div>
                <div class="topic-stats">
                    <div class="topic-posts"><i class="far fa-comment"></i> 5.2k 帖子</div>
                    <div class="topic-trend hot"><i class="fas fa-fire"></i> 爆火</div>
                </div>
            </div>

            <div class="topic-card top-2">
                <div class="topic-rank">2</div>
                <div class="topic-name"><i class="fas fa-hashtag"></i> 可持续旅行方式</div>
                <div class="topic-desc">探索环保、负责任的旅行方式，如何减少旅行对环境的影响</div>
                <div class="topic-stats">
                    <div class="topic-posts"><i class="far fa-comment"></i> 3.8k 帖子</div>
                    <div class="topic-trend hot"><i class="fas fa-fire"></i> 爆火</div>
                </div>
            </div>

            <div class="topic-card top-3">
                <div class="topic-rank">3</div>
                <div class="topic-name"><i class="fas fa-hashtag"></i> 居家健身指南</div>
                <div class="topic-desc">分享无需器械或简单器械即可进行的高效健身方法和计划</div>
                <div class="topic-stats">
                    <div class="topic-posts"><i class="far fa-comment"></i> 3.2k 帖子</div>
                    <div class="topic-trend rising"><i class="fas fa-arrow-up"></i> 上升</div>
                </div>
            </div>

            <div class="topic-card">
                <div class="topic-rank">4</div>
                <div class="topic-name"><i class="fas fa-hashtag"></i> 远程工作技巧</div>
                <div class="topic-desc">探讨如何提高远程工作效率、保持工作生活平衡的实用技巧</div>
                <div class="topic-stats">
                    <div class="topic-posts"><i class="far fa-comment"></i> 2.9k 帖子</div>
                    <div class="topic-trend rising"><i class="fas fa-arrow-up"></i> 上升</div>
                </div>
            </div>

            <div class="topic-card">
                <div class="topic-rank">5</div>
                <div class="topic-name"><i class="fas fa-hashtag"></i> 极简主义生活</div>
                <div class="topic-desc">分享断舍离经验、简约生活方式和如何减少物质依赖的心得</div>
                <div class="topic-stats">
                    <div class="topic-posts"><i class="far fa-comment"></i> 2.5k 帖子</div>
                    <div class="topic-trend rising"><i class="fas fa-arrow-up"></i> 上升</div>
                </div>
            </div>

            <div class="topic-card">
                <div class="topic-rank">6</div>
                <div class="topic-name"><i class="fas fa-hashtag"></i> 独立游戏推荐</div>
                <div class="topic-desc">发现那些不为人知但制作精良的独立游戏作品和开发者故事</div>
                <div class="topic-stats">
                    <div class="topic-posts"><i class="far fa-comment"></i> 2.1k 帖子</div>
                    <div class="topic-trend rising"><i class="fas fa-arrow-up"></i> 上升</div>
                </div>
            </div>
        </div>

        <div class="text-center mt-3">
            <a href="#" class="view-all">查看完整排行榜 <i class="fas fa-angle-right"></i></a>
        </div>
    </div>

    <!-- 4. 小组活跃度排行榜 -->
    <div class="ranking-section">
        <div class="ranking-header">
            <h2 class="ranking-title"><i class="fas fa-users"></i> 小组活跃度排行</h2>
            <div class="ranking-filters">
                <button class="ranking-filter active">综合活跃</button>
                <button class="ranking-filter">新帖数量</button>
                <button class="ranking-filter">成员增长</button>
            </div>
        </div>

        <div class="groups-ranking">
            <div class="group-item">
                <div class="group-rank top-1">1</div>
                <img src="https://picsum.photos/100/100?random=31" class="group-logo" alt="小组logo">
                <div class="group-info">
                    <div class="group-name">城市摄影爱好者</div>
                    <div class="group-members"><i class="fas fa-user-friends"></i> 8,752 名成员</div>
                    <div class="group-activity"><i class="fas fa-comment-alt"></i> 今日新帖: 42</div>
                </div>
                <div class="group-progress">
                    <div class="group-progress-bar" style="width: 96%"></div>
                </div>
                <button class="group-join joined">已加入</button>
            </div>

            <div class="group-item">
                <div class="group-rank top-2">2</div>
                <img src="https://picsum.photos/100/100?random=32" class="group-logo" alt="小组logo">
                <div class="group-info">
                    <div class="group-name">美食探索家</div>
                    <div class="group-members"><i class="fas fa-user-friends"></i> 12,451 名成员</div>
                    <div class="group-activity"><i class="fas fa-comment-alt"></i> 今日新帖: 36</div>
                </div>
                <div class="group-progress">
                    <div class="group-progress-bar" style="width: 88%"></div>
                </div>
                <button class="group-join">加入</button>
            </div>

            <div class="group-item">
                <div class="group-rank top-3">3</div>
                <img src="https://picsum.photos/100/100?random=33" class="group-logo" alt="小组logo">
                <div class="group-info">
                    <div class="group-name">科技发烧友</div>
                    <div class="group-members"><i class="fas fa-user-friends"></i> 7,328 名成员</div>
                    <div class="group-activity"><i class="fas fa-comment-alt"></i> 今日新帖: 29</div>
                </div>
                <div class="group-progress">
                    <div class="group-progress-bar" style="width: 79%"></div>
                </div>
                <button class="group-join">加入</button>
            </div>

            <div class="group-item">
                <div class="group-rank">4</div>
                <img src="https://picsum.photos/100/100?random=34" class="group-logo" alt="小组logo">
                <div class="group-info">
                    <div class="group-name">职场交流圈</div>
                    <div class="group-members"><i class="fas fa-user-friends"></i> 9,567 名成员</div>
                    <div class="group-activity"><i class="fas fa-comment-alt"></i> 今日新帖: 25</div>
                </div>
                <div class="group-progress">
                    <div class="group-progress-bar" style="width: 72%"></div>
                </div>
                <button class="group-join joined">已加入</button>
            </div>

            <div class="group-item">
                <div class="group-rank">5</div>
                <img src="https://picsum.photos/100/100?random=35" class="group-logo" alt="小组logo">
                <div class="group-info">
                    <div class="group-name">健身打卡群</div>
                    <div class="group-members"><i class="fas fa-user-friends"></i> 6,843 名成员</div>
                    <div class="group-activity"><i class="fas fa-comment-alt"></i> 今日新帖: 21</div>
                </div>
                <div class="group-progress">
                    <div class="group-progress-bar" style="width: 65%"></div>
                </div>
                <button class="group-join">加入</button>
            </div>
        </div>

        <div class="text-center mt-3">
            <a href="#" class="view-all">查看完整排行榜 <i class="fas fa-angle-right"></i></a>
        </div>
    </div>

    <!-- 5. 周榜月榜切换式排行榜 -->
    <div class="ranking-section">
        <div class="ranking-header">
            <h2 class="ranking-title"><i class="fas fa-chart-line"></i> 趋势内容排行</h2>
        </div>

        <div class="period-ranking">
            <div class="period-tabs">
                <div class="period-tab active" data-period="weekly">本周趋势</div>
                <div class="period-tab" data-period="monthly">本月趋势</div>
            </div>

            <div class="period-content">
                <div class="weekly-ranking">
                    <div class="trending-item">
                        <div class="trending-rank">1</div>
                        <div class="trending-content">
                            <div class="trending-title">新一代AI工具如何提升工作效率</div>
                            <div class="trending-meta">科技 · 24.5k 浏览</div>
                        </div>
                        <div class="trending-score">98.6</div>
                    </div>

                    <div class="trending-item">
                        <div class="trending-rank">2</div>
                        <div class="trending-content">
                            <div class="trending-title">秋季健康食谱：增强免疫力的5种食材</div>
                            <div class="trending-meta">健康 · 18.7k 浏览</div>
                        </div>
                        <div class="trending-score">92.3</div>
                    </div>

                    <div class="trending-item">
                        <div class="trending-rank">3</div>
                        <div class="trending-content">
                            <div class="trending-title">2023年度最佳旅行摄影作品赏析</div>
                            <div class="trending-meta">摄影 · 15.2k 浏览</div>
                        </div>
                        <div class="trending-score">89.7</div>
                    </div>

                    <div class="trending-item">
                        <div class="trending-rank">4</div>
                        <div class="trending-content">
                            <div class="trending-title">如何建立健康的数字生活习惯</div>
                            <div class="trending-meta">生活 · 12.8k 浏览</div>
                        </div>
                        <div class="trending-score">85.4</div>
                    </div>

                    <div class="trending-item">
                        <div class="trending-rank">5</div>
                        <div class="trending-content">
                            <div class="trending-title">初学者摄影器材选购指南</div>
                            <div class="trending-meta">摄影 · 10.5k 浏览</div>
                        </div>
                        <div class="trending-score">81.2</div>
                    </div>
                </div>

                <div class="monthly-ranking" style="display: none;">
                    <div class="trending-item">
                        <div class="trending-rank">1</div>
                        <div class="trending-content">
                            <div class="trending-title">2023年最值得学习的5项新技能</div>
                            <div class="trending-meta">职场 · 78.3k 浏览</div>
                        </div>
                        <div class="trending-score">96.8</div>
                    </div>

                    <div class="trending-item">
                        <div class="trending-rank">2</div>
                        <div class="trending-content">
                            <div class="trending-title">远程工作完全指南：从工具到心态</div>
                            <div class="trending-meta">职场 · 65.4k 浏览</div>
                        </div>
                        <div class="trending-score">93.5</div>
                    </div>

                    <div class="trending-item">
                        <div class="trending-rank">3</div>
                        <div class="trending-content">
                            <div class="trending-title">环球背包旅行省钱攻略</div>
                            <div class="trending-meta">旅行 · 58.7k 浏览</div>
                        </div>
                        <div class="trending-score">89.2</div>
                    </div>

                    <div class="trending-item">
                        <div class="trending-rank">4</div>
                        <div class="trending-content">
                            <div class="trending-title">家庭园艺：从零开始的蔬菜种植</div>
                            <div class="trending-meta">生活 · 42.1k 浏览</div>
                        </div>
                        <div class="trending-score">85.7</div>
                    </div>

                    <div class="trending-item">
                        <div class="trending-rank">5</div>
                        <div class="trending-content">
                            <div class="trending-title">心理健康：应对现代生活压力的方法</div>
                            <div class="trending-meta">健康 · 38.6k 浏览</div>
                        </div>
                        <div class="trending-score">82.4</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script>
	document.addEventListener('DOMContentLoaded', function () {
		// 排行榜筛选器切换
		const rankingFilters = document.querySelectorAll('.ranking-filter');
		rankingFilters.forEach(filter => {
			filter.addEventListener('click', function () {
				// 只在同一组内切换active状态
				const parentGroup = this.parentElement;
				parentGroup.querySelectorAll('.ranking-filter').forEach(f => {
					f.classList.remove('active');
				});
				this.classList.add('active');
			});
		});

		// 关注按钮交互
		const followButtons = document.querySelectorAll('.user-follow');
		followButtons.forEach(button => {
			button.addEventListener('click', function () {
				if (this.classList.contains('following')) {
					this.classList.remove('following');
					this.textContent = '关注';
					this.style.backgroundColor = 'white';
					this.style.color = 'var(--primary)';
				} else {
					this.classList.add('following');
					this.textContent = '已关注';
					this.style.backgroundColor = 'var(--primary)';
					this.style.color = 'white';
				}
			});
		});

		// 加入小组按钮交互
		const joinButtons = document.querySelectorAll('.group-join');
		joinButtons.forEach(button => {
			button.addEventListener('click', function () {
				if (this.classList.contains('joined')) {
					this.classList.remove('joined');
					this.textContent = '加入';
					this.style.backgroundColor = 'white';
					this.style.color = 'var(--primary)';
				} else {
					this.classList.add('joined');
					this.textContent = '已加入';
					this.style.backgroundColor = 'var(--primary)';
					this.style.color = 'white';
				}
			});
		});

		// 周榜月榜切换
		const periodTabs = document.querySelectorAll('.period-tab');
		periodTabs.forEach(tab => {
			tab.addEventListener('click', function () {
				periodTabs.forEach(t => t.classList.remove('active'));
				this.classList.add('active');

				const period = this.getAttribute('data-period');
				if (period === 'weekly') {
					document.querySelector('.weekly-ranking').style.display = 'flex';
					document.querySelector('.monthly-ranking').style.display = 'none';
				} else {
					document.querySelector('.weekly-ranking').style.display = 'none';
					document.querySelector('.monthly-ranking').style.display = 'flex';
				}
			});
		});
	});
</script>

